<template>
    <el-form :model="model" v-bind="$attrs" >
        <template v-for="item in formItems">
            <el-form-item :label="item.label">
                <!-- slot -->
                <slot v-if="item.slot" :name="item.slot" :params="model" :key="item.key" />
                <!-- render -->
                <template v-else-if="item.type === FormItemType.render">
                    <yfRender :to-render="item.render"></yfRender>
                </template>
                <!-- 默认 -->
                <el-input v-else v-model="model[item.key]" />
            </el-form-item>
        </template>
    </el-form>
</template>
  
<script lang="ts" setup>
import { yfRender } from '@/components';
import { FormItemType } from "./form";


export interface FormItem {
  key: string,
  type?: FormItemType,
  label?: string,
  slot?: string,
  render?: any,
}

export interface FormProps {
    formItems: FormItem[],
    model: Record<string, any>
}

defineProps<FormProps>();


/* ****** 内部函数 ****** */


/* ****** 向外暴露的属性 ****** */

</script>
  
<style></style>